<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>扇形菜单</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="app">
        <div class="menu"><img class="icon_menu" src="./image/menu.png" /><span></span></div>
        <div class="btn btn1" data-num="1"><span>照相</span></div>
        <div class="btn btn2" data-num="2"><span>位置</span></div>
        <div class="btn btn3" data-num="3"><span>音乐</span></div>
        <div class="btn btn4" data-num="4"><span>聊天</span></div>
    </div>
</body>
<script src="./js/zepto.js"></script>

<script>
    $(function () {
        $(".menu").click(function () {
            let span = $(this).find("span");
            if (span.hasClass("open")) {
                span.removeClass("open").addClass("close");
                $(".btn").removeClass("open").addClass("close");
            } else {
                span.removeClass("close").addClass("open");
                $(".btn").removeClass("close").addClass("open");
            }
        });
    });
</script>

</html>